<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        列表
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="css/main.css" media="all">
    <script type="text/javascript" src="lib/loading/okLoading.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="lib\layui\css\layui_2.5.7.css">
</head>

<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a><cite>首页</cite></a>
            <a><cite>财务业务</cite></a>
            <a><cite>资金流水</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
            href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon"
                style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
        <div class="row">
            <div class="col-xs-6 col-sm-4 col-md-2">
                <section class="panel">
                    <div class="symbol bgcolor-blue"> <i class=" iconfont icon-dashaxiaoqudizhi01"></i>
                    </div>
                    <div class="value tab-menu" bind="1">
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="本月收款总额（元）"><i
                                class="iconfont " data-icon=""></i>
                            <h1>45</h1>
                        </a>
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="本月收款总额（元）"> <i
                                class="iconfont " data-icon=""></i><span>本月收款总额（元）</span></a>
                    </div>
                </section>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-2">
                <section class="panel">
                    <div class="symbol bgcolor-blue"> <i class="iconfont icon-dashaxiaoqudizhi01"></i>
                    </div>
                    <div class="value tab-menu" bind="1">
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="本月付款总额（元）"> <i
                                class="iconfont " data-icon=""></i>
                            <h1>600</h1>
                        </a>

                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="本月付款总额（元）"> <i
                                class="iconfont " data-icon=""></i><span>本月付款总额（元）</span></a>

                    </div>
                </section>
            </div>

            <div class="col-xs-6 col-sm-4 col-md-2">
                <section class="panel">
                    <div class="symbol bgcolor-commred"> <i class="iconfont icon-dashaxiaoqudizhi01"></i>
                    </div>
                    <div class="value tab-menu" bind="1">
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="历史收款总额（元）"> <i
                                class="iconfont " data-icon=""></i>
                            <h1>8310</h1>
                        </a>
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="历史收款总额（元）"> <i
                                class="iconfont " data-icon=""></i><span>历史收款总额（元）</span></a>
                    </div>
                </section>
            </div>

            <div class="col-xs-6 col-sm-4 col-md-2">
                <section class="panel">
                    <div class="symbol bgcolor-commred"><i class="iconfont icon-dashaxiaoqudizhi01"></i>
                    </div>
                    <div class="value tab-menu" bind="1">
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="历史付款总额（元）"> <i
                                class="iconfont " data-icon=""></i>
                            <h1>1314</h1>
                        </a>
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="历史付款总额（元）"> <i
                                class="iconfont " data-icon=""></i><span>历史付款总额（元）</span></a>
                    </div>
                </section>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-2">
                <section class="panel">
                    <div class="symbol bgcolor-yellow-green"> <i class="iconfont icon-dashaxiaoqudizhi01"></i>
                    </div>
                    <div class="value tab-menu" bind="1">
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="本月借款总额（元）"> <i
                                class="iconfont " data-icon=""></i>
                            <h1>1314</h1>
                        </a>
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="本月借款总额（元）"> <i
                                class="iconfont " data-icon=""></i><span>本月借款总额（元）</span></a>
                    </div>
                </section>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-2">
                <section class="panel">
                    <div class="symbol bgcolor-yellow-green"> <i class="iconfont icon-dashaxiaoqudizhi01"></i>
                    </div>
                    <div class="value tab-menu" bind="1">
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="本月还款总额（元）"> <i
                                class="iconfont " data-icon=""></i>
                            <h1>1314</h1>
                        </a>
                        <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="本月还款总额（元）"> <i
                                class="iconfont " data-icon=""></i><span>本月还款总额（元）</span></a>
                    </div>
                </section>
            </div>

        </div>

        <div class="main_box">
            <div class="panel-heading">
                <ul class="nav nav-tabs" id="navTabs">
                    <li class="active"><a class="receivePane" data-tab="" href="capitalflow_sk.html">收款流水</a></li>
                    <li class=""><a class="payPane" data-tab="" href="paymentflow.html">付款流水</a></li>
                    <li class=""><a class="borrowPane" data-tab="" href="#">借款流水</a></li>
                    <li class=""><a class="repayPane" data-tab="" href="#">还款流水</a></li>
                    <li class=""><a class="cashAccountAllPane" data-tab="" href="#">资金汇总</a></li>
                    <li class=""><a class="cashRecordPane" data-tab="" href="#">余额变动</a></li>
                </ul>
            </div>
        </div>

        <form class="layui-form x-center" action="">
            <div class="layui-form-pane" style="margin-top: 15px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">日期范围</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
                    </div>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" name="username" placeholder="请输入登录名" autocomplete="off" class="layui-input">
                    </div>


                    <div class="layui-input-inline">
                        <select name="modules" lay-verify="required" lay-search="">
                            <option value="">资金账户</option>
                            <option value="1">layer</option>
                            <option value="2">form</option>
                            <option value="3">layim</option>
                            <option value="4">element</option>
                            <option value="5">laytpl</option>
                            <option value="6">upload</option>
                            <option value="7">laydate</option>
                            <option value="8">laypage</option>
                            <option value="9">flow</option>
                            <option value="10">util</option>
                            <option value="11">code</option>
                            <option value="12">tree</option>
                            <option value="13">layedit</option>
                            <option value="14">nav</option>
                            <option value="15">tab</option>
                            <option value="16">table</option>
                            <option value="17">select</option>
                            <option value="18">checkbox</option>
                            <option value="19">switch</option>
                            <option value="20">radio</option>
                        </select>

                    </div>
                    <div class="layui-input-inline">
                        <select name="modules" lay-verify="required" lay-search="">
                            <option value="">款项类型</option>
                            <option value="1">layer</option>
                            <option value="2">form</option>
                            <option value="3">layim</option>
                            <option value="4">element</option>
                            <option value="5">laytpl</option>
                            <option value="6">upload</option>
                            <option value="7">laydate</option>
                            <option value="8">laypage</option>
                            <option value="9">flow</option>
                            <option value="10">util</option>
                            <option value="11">code</option>
                            <option value="12">tree</option>
                            <option value="13">layedit</option>
                            <option value="14">nav</option>
                            <option value="15">tab</option>
                            <option value="16">table</option>
                            <option value="17">select</option>
                            <option value="18">checkbox</option>
                            <option value="19">switch</option>
                            <option value="20">radio</option>
                        </select>

                    </div>

                    <div class="layui-inline" style="float: left;">
                        <label class="layui-form-label">范围</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
                        </div>
                    </div>


                    <div class="layui-input-inline">
                        <input type="text" name="fkdw" placeholder="付款单位" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="width:80px">
                        <button class="layui-btn" lay-submit="" lay-filter="sreach"><i
                                class="layui-icon">&#xe615;</i></button>
                    </div>
                </div>
            </div>
        </form>
        <xblock>

            <button class="layui-btn" onclick="admin_add('添加','CapitalFlow_skadd.html','1000','600')"><i
                    class="layui-icon">&#xe608;</i>添加</button>
        </xblock>
        <div class="layui-card-body">
            <table class="layui-table" id="test" lay-filter="test">
            </table>
        </div>


    </div>
    <script type="text/html" id="barDemo">
        <a title="编辑" href="javascript:;"
                            onclick="community_edit('编辑','CapitalFlow_skadd.html','2','1000','600')" class="ml-5"
                            style="text-decoration:none">
                            <i class="layui-icon">&#xe642;</i>
                        </a>
                        <a title="删除" href="javascript:;" onclick="admin_del(this,'1')" style="text-decoration:none">
                            <i class="layui-icon">&#xe640;</i>
                        </a>
    </a>
    </script>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/myAjax.js"></script>
    <script type="text/javascript" src="js/pub.js"></script>
    <script src="lib/layui/layui2.5.7.js"></script>
    <!-- <script src="lib/layui/layui.js" charset="utf-8"></script> -->
    <script src="js/x-layui.js" charset="utf-8"></script>
    <script>



        layui.use(['laydate', 'element', 'laypage', 'layer', 'form'], function () {
            $ = layui.jquery;//jquery
            laydate = layui.laydate;//日期插件
            lement = layui.element;//面包导航
            laypage = layui.laypage;//分页
            layer = layui.layer;//弹出层
            var form = layui.form;
            okLoading.close($);
            //以上模块根据需要引入
            layer.ready(function () { //为了layer.ext.js加载完毕再执行
                layer.photos({
                    photos: '#x-img'
                    //,shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
                });
            });
            var start = {
                max: '2099-06-16 23:59:59'
                , istoday: false
                , choose: function (datas) {
                    end.min = datas; //开始日选好后，重置结束日的最小日期
                    end.start = datas //将结束日的初始值设定为开始日
                }
            };
            var end = {

                max: '2099-06-16 23:59:59'
                , istoday: false
                , choose: function (datas) {
                    start.max = datas; //结束日选好后，重置开始日的最大日期
                }
            };

            document.getElementById('LAY_demorange_s').onclick = function () {
                start.elem = this;
                laydate(start);
            }
            document.getElementById('LAY_demorange_e').onclick = function () {
                end.elem = this
                laydate(end);
            }

        });


        //批量删除提交
        function delAll() {
            layer.confirm('确认要删除吗？', function (index) {
                //捉到所有被选中的，发异步进行删除
                layer.msg('删除成功', { icon: 1 });
            });
        }
        /*添加*/
        function admin_add(title, url, w, h) {
            x_admin_show(title, url, w, h);
        }


        //编辑
        function community_edit(title, url, id, w, h) {
            url = url + "?id=" + id;
            x_admin_show(title, url, w, h);
        }
        /*删除*/
        function admin_del(obj, id) {
            layer.confirm('确认要删除吗？', { icon: 3, title: '提示信息' }, function (index) {
                $.ajax({
                    type: "post",
                    url: "/xiyuan/banner/banner_del.html",
                    data: {
                        userId:$userId,
                        id: id
                    },
                    headers: {
                        "token": $token,
                    },
                    dataType: "json",
                    success: function (data) {
                        //console.log(data);
                        if (data.status == 1) {
                            //发异步删除数据
                            $(obj).parents("tr").remove();
                            layer.msg(data.info, { icon: 6, time: 1000 });
                            setTimeout(function () {
                                window.location.reload();
                            }, 1000); return false;
                        } else {
                            layer.msg(data.info, { icon: 5, time: 1000 }); return false;
                        }
                    }
                });
                //发异步删除数据
                $(obj).parents("tr").remove();
                layer.msg('已删除!', { icon: 1, time: 1000 });
            });
        }
    </script>
    <script>


        layui.use('table', function () {
            table = layui.table;
            //方法级渲染
            var t1 = table.render({
                elem: '#test',
                url: $baseUrl + 'borrowAndReturnWater/findBorrowAndReturnWaterList',
                where: {
                    userId: $userId,
                    type: '借款'
                },
                headers: {
                    token: $token
                }
                , toolbar: '#toolbarDemo',

                // toolbar: true,
                cols: [
                    [
                        {
                            field: 'id',
                            title: 'id',

                        },
                        {
                            field: 'type',
                            title: '类型',

                        },
                        {
                            field: 'repaymentDate',
                            title: '还款日期',

                        },
                        {
                            field: 'repaymentAmount',
                            title: '还款金额',

                        },
                        {
                            field: 'typeOfPayment',
                            title: '款项类型',

                        },
                        {
                            field: 'revenueAndExpenditureChannels',
                            title: ' 收支途径',

                        },
                        {
                            field: 'repaymentUnit',
                            title: '还款单位',

                        },
                        {
                            field: 'dateOfLoan;',
                            title: '借款日期',

                        },
                        {
                            field: 'capitalAccount;',
                            title: '资金账户',

                        },
                        {
                            field: 'relatedApproval;',
                            title: '关联审批',

                        },
                        {
                            field: 'status',
                            title: '操作',
                            templet: '#barDemo',
                            width: '22%'
                        }]
                ],
                request: {
                    pageName: 'pageNum', //页码的参数名称，默认：page
                    limitName: 'pageSize',
                },
                response: {
                    statusName: 'code' //规定数据状态的字段名称，默认：code
                    ,
                    statusCode: 0 //规定成功的状态码，默认：0
                    ,
                    msgName: 'msg' //规定状态信息的字段名称，默认：msg
                    ,
                    countName: 'total' //规定数据总数的字段名称，默认：count
                    ,
                    dataName: 'data', //规定数据列表的字段名称，默认：data
                },
                id: 'test',
                page: true,
                height: 'auto',
                even: true,
                done: function (res, curr, count) {
                    //是否有权限或权限是否失效
                    authorizeState();
                }
            });


            //修改状态
            let form = layui.form;
            form.on('switch(setStatus)', function (obj) {
                let arr = obj.value.split("|");
                let request = {
                    url: "admin/editUserStatus",
                    method: "POST",
                    data: {
                        status: arr[0] === '0' ? 1 : 0,
                        id: arr[1],
                        userId: $userId
                    }
                };
                sendRequest(request, (data) => {
                    if (data.code === 0) {
                        layer.msg("修改成功", {
                            icon: 1
                        });
                        // t1.reload();
                    } else {
                        layer.msg(data.msg, {
                            icon: 5
                        });
                    }
                })
            });


            //工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'batchDel':
                        var data = checkStatus.data;
                        let ids = '';
                        data.forEach(item => {
                            ids += item.id + ',';
                        });
                        if (!ids) {
                            layer.alert("请选择数据！");
                            return;
                        }
                        ids = ids.substring(0, ids.length - 1);

                        layer.confirm('是否确认批量删除 ？', {
                            icon: 3,
                            title: '提示'
                        }, function (index) {
                            let request = {
                                url: "admin/delUser",
                                data: {
                                    userId: $userId,
                                    ids: ids
                                },
                                method: "POST",
                            };
                            sendRequest(request, (res) => {
                                if (res.code === 0) {
                                    layer.msg("删除成功", {
                                        icon: 1
                                    });
                                    t1.reload();
                                } else {
                                    layer.msg("删除失败，请稍后再试！", {
                                        icon: 5
                                    });
                                }
                            });
                            layer.close(index);
                        });
                        break;
                    case 'addUser':

                        xadmin.open('添加管理员', 'user_list_add');

                        break;
                    default:
                        break;
                }
            });


            //监听工具条
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                let data = obj.data; //获得当前行数据
                let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                if (layEvent === 'del') { //删除
                    layer.confirm('是否确认删除 【' + data.nickname + '】 ？', {
                        icon: 3,
                        title: '提示'
                    }, function (index) {
                        let request = {
                            url: "admin/delUser",
                            data: {
                                userId: $userId,
                                ids: data.id
                            },
                            method: "POST",
                        };
                        sendRequest(request, (data) => {
                            if (data.code === 0) {
                                layer.msg("删除成功", {
                                    icon: 1
                                });
                                t1.reload();
                            } else {
                                layer.msg("删除失败，请稍后再试！", {
                                    icon: 5
                                });
                            }
                        });
                        layer.close(index);
                    });
                } else if (layEvent === 'view') { //编辑
                    xadmin.open('编辑用户', 'user_list_add?recordId=' + data.id)
                }
            });

        });



    </script>
</body>

</html>
